<template>
  <a-card title="照片管理" >
    <template #extra >
      <a-button type="primary" @click="openModal" >上传照片</a-button>
    </template>
    <a-table
      :columns="columns"
      :dataSource="dataSource"
    >
      <template #bodyCell="{column, record}" >
        <span v-if="column.key === 'url'" >
          <a-image style="width: 86px;height: 86px;" :src="'http://39.96.117.178:9091/' + record.name" ></a-image>
          <!-- <a-image style="width: 86px;height: 86px;" :src="'http://39.96.117.178:9091/' + record.url" ></a-image> -->
        </span>
        <span v-if="column.key === 'action'" >
          <a-popconfirm
            title="确定要删除这种照片吗？"
            ok-text="Yes"
            cancel-text="No"
            @confirm="_delPhoto(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
  </a-card>

  <a-modal
    title="上传照片"
    width="700px"
    :open="visible"
    @cancel="closeModal"
    @ok="ok"
  >
    <a-form>
      <a-form-item  label="所属分类" >
        <a-cascader
          v-model:value="photoRef.categoryId"
          :options="categoryList"
          placeholder="请选择一个分类，上传照片后"
          :field-names="{ label: 'name', value: 'id', children: 'children' }"
        />
      </a-form-item>
      <a-form-item label="上传照片" >
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="true"
          :beforeUpload="beforeUpload"
          @change="handleChange"
          @drop="handleDrop"
        >
          <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
          </p>
          <p class="ant-upload-text">点击或者拖拽照片到这个上传框里</p>
          <p class="ant-upload-hint">
            单文件或者多文件都可以，我没做类型约束，所以记得只能是图片
          </p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </a-modal>

</template>

<script lang="ts" setup >
import { onMounted, ref, reactive } from 'vue'
import { getCategoryList, addPhoto, getPhotoPage, delPhoto } from '@/api/index'
import { message } from 'ant-design-vue'

const visible = ref(false)

const categoryList = ref([])

const fileList = ref([])

const photoRef = ref({
  file: '',
  categoryId: ''
})

const queryParams = reactive({
  page: 1
})

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '照片',
    dataIndex: 'url',
    key: 'url'
  },
  {
    title: '分类ID',
    dataIndex: 'categoryId',
    key: 'categoryId'
  },
  {
    title: '删除',
    dataIndex: 'action',
    key: 'action'
  }
]

const dataSource = ref([])

const openModal = () => {
  visible.value = true
}

const closeModal = () => {
  visible.value = false
}

const ok = async () => {
  const { data } = await addPhoto(photoRef.value)
  message.success(data as string)
  visible.value = false
  _getPhotoPage()
}

const handleChange = () => {

}

const handleDrop = () => {

}

const _getPhotoPage = async () => {
  const { data } = await getPhotoPage(queryParams)
  console.log(data.records)
  dataSource.value = data.records
}

const _getCategoryList = async () => {
  const { data } = await getCategoryList()
  console.log(data)
  categoryList.value = data
}

const beforeUpload = (file, fileList) => {
  const fs = new FormData()
  fs.append('file', file)
  fs.append('categoryId', photoRef.value.categoryId[photoRef.value.categoryId.length - 1])
  photoRef.value = fs
  return false
}

const _delPhoto = async (record) => {
  await delPhoto(record.id)
  _getPhotoPage()
}

onMounted(() => {
  _getCategoryList()
  _getPhotoPage()
})

</script>

<style lang="less" >
</style>
